const list_warp = document.querySelector('.list_warp')
const cityList = document.querySelector('.cityList')

let list = []
let hotList = []
let timer
async function getCity() {
    try{
        const res = await new axios.get('https://m.maizuo.com/gateway?k=1702991',{
            headers:{
                'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088343014639228524691457","bc":"310100"}',
                'x-host':'mall.film-ticket.city.list'
            }
        })
        res.data.data.cities.forEach(item=>{
            const firstLetter = item.pinyin[0].toUpperCase()
            const curType = list.find(v => v.type === firstLetter)
            if (curType) {
             curType.list.push(item)
            } else {
                list.push({
                    type: firstLetter,
                    list: [item]
                })
            }
        })
        list.sort((a,b)=>{
           return a.type.charCodeAt()-b.type.charCodeAt()
        })
        console.log(res.data.data.cities)
        hotList = res.data.data.cities.filter(item =>item.isHot === 1)
        renderCity()
        // cityClick()
    }
    catch(e){
        console.log(e)
    }
    finally{
        console.log('加载完成')
    }
}
getCity()
function renderCity(){
    list_warp.innerHTML = `<div class="hotCity">
                                <div>
                                    <h4>GPS定位</h4>
                                    <ul>
                                        <li>北京</li>
                                    </ul>
                                </div>
                                <div>
                                    <h4>热门城市</h4>
                                    <ul>
                                        ${hotList.map(item =>`<li>${item.name}</li>`).join('')}
                                    </ul>
                                </div>
                            </div>`
    list_warp.innerHTML += list.map(item =>{
        return `
            <div class="city_item">
                <h4>${item.type}</h4>
                <ul>
                    ${item.list.map(v => `<li>${v.name}</li>`).join('')}
                </ul>
            </div>
        `
    }).join('')
    cityList.innerHTML = list.map(item=>`<p>${item.type}</p>`).join('')
    let lis = document.querySelectorAll('li')
    lis.forEach(li =>{
        li.addEventListener('click',(e) =>{
            let val = li.innerHTML
            console.log(val)
            let id = 0
            list.forEach(item =>{
                item.list.forEach(v =>{
                    // console.log(v.name)
                    if(v.name === val){
                        id = v.cityId
                    } 
                })
            })
            console.log(id)
            location.href = `./上拉加载.html?cityId=${id}`
        })
    })
    cityClick()
}
function cityClick(){
    const cityAll = [...cityList.querySelectorAll('p')]
    const city_itemAll = [...list_warp.querySelectorAll('.city_item')]
    cityAll.forEach((city,i)=>{
        city.addEventListener('click',()=>{
           list_warp.scrollTop = city_itemAll[i].offsetTop -92
           showFn(city.innerHTML)
        })
    })
}
function showFn(val){
    const tip = document.querySelector('.tip')
    tip.classList.add('show')
    tip.innerHTML = val
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
        tip.classList.remove('show')
        tip.innerHTML = ''
    }, 2000);
}
const inp = document.querySelector('.search input')
inp.addEventListener('change',e=>{
    let val = inp.value.trim()
    let lis = document.querySelectorAll('.city_item li')
    lis.forEach(li =>{
        if(li.outerText === val){
            list_warp.scrollTop = li.offsetTop -92
        }else{
            
        }
    })
})
